"use client";
import { useEffect, useRef } from "react";

const BookOpen = ({ className = "", play = false }) => {
  useEffect(() => {
    if (play) {
      svgRefs.current.forEach((ref) => {
        ref?.beginElement();
      });
    }
  }, [play]);

  const svgRefs = useRef<(SVGAnimationElement | null)[]>([
    null,
    null,
    null,
    null,
  ]);

  return (
    <div>
      <svg
        role="img"
        aria-label="book opening animation"
        id="2663:22187"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        className={className}
        width={20}
      >
        <g id="2663:22187_translate">
          <g transform="matrix(1,0,0,1,0,0)">
            <g id="2663:22187" opacity={1} style={{ mixBlendMode: "normal" }}>
              <g>
                <defs>
                  <clipPath
                    id="2663:22187_clipPath"
                    x="-50%"
                    y="-50%"
                    width="200%"
                    height="200%"
                  >
                    <path
                      d="M0,0h20v0v20v0h-20v0v-20z"
                      fill="currentColor"
                      clipRule="nonzero"
                    />
                  </clipPath>
                </defs>
                <g clipPath="url(#2663:22187_clipPath)">
                  <g id="2663:22188_translate">
                    <g transform="matrix(1,0,0,1,1.6667,2.5)">
                      <g
                        id="2663:22188"
                        opacity={1}
                        style={{ mixBlendMode: "normal" }}
                      >
                        <g>
                          <g>
                            <g style={{ mixBlendMode: "normal" }}>
                              <g>
                                <path
                                  id="2663:22188_stroke_path"
                                  d="M0,0h5c0.88405,0 1.7319,0.35119 2.35702,0.97631c0.62512,0.62512 0.97631,1.47297 0.97631,2.35702v11.66667c0,-0.66304 -0.26339,-1.29893 -0.73223,-1.76777c-0.46884,-0.46884 -1.10473,-0.73223 -1.76777,-0.73223h-5.83333z M16.66667,0h-5c-0.88405,0 -1.7319,0.35119 -2.35702,0.97631c-0.62512,0.62512 -0.97631,1.47297 -0.97631,2.35702v11.66667c0,-0.66304 0.26339,-1.29893 0.73223,-1.76777c0.46884,-0.46884 1.10473,-0.73223 1.76777,-0.73223h5.83333z"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="1.2"
                                  strokeLinecap="square"
                                  strokeLinejoin="miter"
                                  strokeDasharray="0 0"
                                  strokeOpacity={1}
                                />
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                  <g id="2663:22211_translate">
                    <g transform="matrix(1,0,0,1,10.0003,2.5)">
                      <g
                        id="2663:22211"
                        opacity={1}
                        style={{ mixBlendMode: "normal" }}
                      >
                        <g>
                          <g>
                            <g style={{ mixBlendMode: "normal" }}>
                              <g>
                                <path
                                  id="2663:22211_stroke_path"
                                  d="M8.33333,0h-5c-0.88405,0 -1.7319,0.35119 -2.35702,0.97631c-0.62512,0.62512 -0.97631,1.47297 -0.97631,2.35702v11.66667c0,-0.66304 0.26339,-1.29893 0.73223,-1.76777c0.46884,-0.46884 1.10473,-0.73223 1.76777,-0.73223h5.83333z"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="1.2"
                                  strokeLinecap="square"
                                  strokeLinejoin="miter"
                                  strokeDasharray="0 0"
                                  strokeOpacity={1}
                                />
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                  <g id="2663:22189_translate">
                    <g transform="matrix(1,0,0,1,1.667,2.5)">
                      <g
                        id="2663:22189"
                        opacity={0}
                        style={{ mixBlendMode: "normal" }}
                      >
                        <g>
                          <g>
                            <g style={{ mixBlendMode: "normal" }}>
                              <g>
                                <path
                                  id="2663:22189_stroke_path"
                                  d="M0.2504,0h4.84976c0.85749,0 1.67986,0.35119 2.2862,0.97631c0.60634,0.62512 0.94697,1.47297 0.94697,2.35702v11.66667c0,-0.66304 -0.25548,-1.29893 -0.71023,-1.76777c-0.45475,-0.46884 -1.07153,-0.73223 -1.71465,-0.73223h-5.65805z"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="1.2"
                                  strokeLinecap="square"
                                  strokeLinejoin="miter"
                                  strokeDasharray="0 0"
                                  strokeOpacity={1}
                                />
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
        <>
          <animate
            ref={(ref) => {
              svgRefs.current[0] = ref as SVGAnimationElement;
              return ref as SVGAnimationElement;
            }}
            begin={"indefinite"}
            href="#2663:22211_stroke_path"
            attributeName="d"
            values="M8.33333,0h-5c-0.88405,0 -1.7319,0.35119 -2.35702,0.97631c-0.62512,0.62512 -0.97631,1.47297 -0.97631,2.35702v11.66667c0,-0.66304 0.26339,-1.29893 0.73223,-1.76777c0.46884,-0.46884 1.10473,-0.73223 1.76777,-0.73223h5.83333z;M7.21003,0h-4.32602c-0.76489,0 -1.49845,0.35119 -2.0393,0.97631c-0.54086,0.62512 -0.84471,1.47297 -0.84471,2.35702v11.66667c0,-0.66304 0.22789,-1.29893 0.63353,-1.76777c0.40564,-0.46884 0.95581,-0.73223 1.52948,-0.73223h5.04702z;M6.16412,0h-3.69847c-0.65393,0 -1.28108,0.35119 -1.74348,0.97631c-0.4624,0.62512 -0.72217,1.47297 -0.72217,2.35702v11.66667c0,-0.66304 0.19483,-1.29893 0.54163,-1.76777c0.3468,-0.46884 0.81716,-0.73223 1.30761,-0.73223h4.31489z;M5.18252,0h-3.10951c-0.5498,0 -1.07707,0.35119 -1.46584,0.97631c-0.38876,0.62512 -0.60717,1.47297 -0.60717,2.35702v11.66667c0,-0.66304 0.1638,-1.29893 0.45538,-1.76777c0.29157,-0.46884 0.68703,-0.73223 1.09938,-0.73223h3.62776z;M4.26422,0h-2.55853c-0.45238,0 -0.88622,0.35119 -1.2061,0.97631c-0.31988,0.62512 -0.49958,1.47297 -0.49958,2.35702v11.66667c0,-0.66304 0.13478,-1.29893 0.37469,-1.76777c0.23991,-0.46884 0.56529,-0.73223 0.90458,-0.73223h2.98495z;M3.41141,0h-2.04685c-0.36191,0 -0.70899,0.35119 -0.96489,0.97631c-0.25591,0.62512 -0.39967,1.47297 -0.39967,2.35702v11.66667c0,-0.66304 0.10782,-1.29893 0.29975,-1.76777c0.19193,-0.46884 0.45224,-0.73223 0.72367,-0.73223h2.38799z;M2.62861,0h-1.57717c-0.27886,0 -0.5463,0.35119 -0.74348,0.97631c-0.19718,0.62512 -0.30796,1.47297 -0.30796,2.35702v11.66667c0,-0.66304 0.08308,-1.29893 0.23097,-1.76777c0.14789,-0.46884 0.34847,-0.73223 0.55761,-0.73223h1.84003z;M1.92261,0h-1.15356c-0.20396,0 -0.39957,0.35119 -0.5438,0.97631c-0.14422,0.62512 -0.22525,1.47297 -0.22525,2.35702v11.66667c0,-0.66304 0.06077,-1.29893 0.16894,-1.76777c0.10817,-0.46884 0.25487,-0.73223 0.40785,-0.73223h1.34583z;M1.30221,0h-0.78132c-0.13815,0 -0.27063,0.35119 -0.36832,0.97631c-0.09768,0.62512 -0.15256,1.47297 -0.15256,2.35702v11.66667c0,-0.66304 0.04116,-1.29893 0.11442,-1.76777c0.07326,-0.46884 0.17263,-0.73223 0.27624,-0.73223.91154z;M0.7798,0h-0.46788c-0.08273,0 -0.16207,0.35119 -0.22056,0.97631c-0.0585,0.62512 -0.09136,1.47297 -0.09136,2.35702v11.66667c0,-0.66304 0.02465,-1.29893 0.06852,-1.76777c0.04387,-0.46884 0.10338,-0.73223 0.16542,-0.73223.54586z;M0.3718,0h-0.22308c-0.03944,0 -0.07727,0.35119 -0.10516,0.97631c-0.02789,0.62512 -0.04356,1.47297 -0.04356,2.35702v11.66667c0,-0.66304 0.01175,-1.29893 0.03267,-1.76777c0.02092,-0.46884 0.04929,-0.73223 0.07887,-0.73223.26026z;M0.1011,0h-0.06066c-0.01073,0 -0.02101,0.35119 -0.0286,0.97631c-0.00758,0.62512 -0.01184,1.47297 -0.01184,2.35702v11.66667c0,-0.66304 0.0032,-1.29893 0.00888,-1.76777c0.00569,-0.46884 0.0134,-0.73223 0.02145,-0.73223.07077z;M0.001,0h-0.0006c-0.00011,0 -0.00021,0.35119 -0.00028,0.97631c-0.00008,0.62512 -0.00012,1.47297 -0.00012,2.35702v11.66667c0,-0.66304 0.00003,-1.29893 0.00009,-1.76777c0.00006,-0.46884 0.00013,-0.73223 0.00021,-0.73223.0007z;M0.001,0h-0.0006c-0.00011,0 -0.00021,0.35119 -0.00028,0.97631c-0.00008,0.62512 -0.00012,1.47297 -0.00012,2.35702v11.66667c0,-0.66304 0.00003,-1.29893 0.00009,-1.76777c0.00006,-0.46884 0.00013,-0.73223 0.00021,-0.73223.0007z"
            dur="0.5s"
            repeatCount={"1"}
            keyTimes="0;0.04;0.08;0.12;0.16;0.2;0.24;0.28;0.32;0.36;0.4;0.44;0.48;1"
            fill="freeze"
            restart={"whenNotActive"}
          />
          <animate
            ref={(ref) => {
              svgRefs.current[1] = ref as SVGAnimationElement;
              return ref as SVGAnimationElement;
            }}
            begin={"indefinite"}
            href="#2663:22211"
            attributeName="opacity"
            values="1;1;0;0"
            dur="0.5s"
            repeatCount={"1"}
            calcMode="spline"
            keyTimes="0;0.48;0.5;1"
            keySplines="0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1"
            additive="replace"
            fill="freeze"
            restart={"whenNotActive"}
          />
          <animate
            ref={(ref) => {
              svgRefs.current[2] = ref as SVGAnimationElement;
              return ref as SVGAnimationElement;
            }}
            begin={"indefinite"}
            href="#2663:22189_stroke_path"
            attributeName="d"
            values="M0.2504,0h4.84976c0.85749,0 1.67986,0.35119 2.2862,0.97631c0.60634,0.62512 0.94697,1.47297 0.94697,2.35702v11.66667c0,-0.66304 -0.25548,-1.29893 -0.71023,-1.76777c-0.45475,-0.46884 -1.07153,-0.73223 -1.71465,-0.73223h-5.65805z;M0.8806,0h4.47164c0.79063,0 1.54889,0.35119 2.10795,0.97631c0.55906,0.62512 0.87314,1.47297 0.87314,2.35702v11.66667c0,-0.66304 -0.23556,-1.29893 -0.65486,-1.76777c-0.4193,-0.46884 -0.98799,-0.73223 -1.58096,-0.73223h-5.21691z;M1.7809,0h3.93146c0.69512,0 1.36178,0.35119 1.85331,0.97631c0.49153,0.62512 0.76766,1.47297 0.76766,2.35702v11.66667c0,-0.66304 -0.2071,-1.29893 -0.57575,-1.76777c-0.36865,-0.46884 -0.86864,-0.73223 -1.38998,-0.73223h-4.5867z;M3.1753,0h3.09481c0.5472,0 1.07198,0.35119 1.45891,0.97631c0.38693,0.62512 0.6043,1.47297 0.6043,2.35702v11.66667c0,-0.66304 -0.16303,-1.29893 -0.45322,-1.76777c-0.29019,-0.46884 -0.68378,-0.73223 -1.09418,-0.73223h-3.61061z;M5.0704,0h1.95775c0.34615,0 0.67813,0.35119 0.92289,0.97631c0.24477,0.62512 0.38227,1.47297 0.38227,2.35702v11.66667c0,-0.66304 -0.10313,-1.29893 -0.28671,-1.76777c-0.18357,-0.46884 -0.43256,-0.73223 -0.69217,-0.73223h-2.28404z;M6.4419,0h1.13484c0.20065,0 0.39309,0.35119 0.53497,0.97631c0.14188,0.62512 0.22159,1.47297 0.22159,2.35702v11.66667c0,-0.66304 -0.05978,-1.29893 -0.16619,-1.76777c-0.10641,-0.46884 -0.25074,-0.73223 -0.40123,-0.73223h-1.32399z;M7.2097,0.67416c0.1192,0 0.23352,0.35119 0.3178,0.97631c0.08429,0.62512 0.13164,1.47297 0.13164,2.35702v11.66667c0,-0.66304 -0.03551,-1.29893 -0.09873,-1.76777c-0.06322,-0.46884 -0.14895,-0.73223 -0.23835,-0.73223h-0.78652z;M7.6708,0.3975c0.07028,0 0.13769,0.35119 0.18738,0.97631c0.0497,0.62512 0.07762,1.47297 0.07762,2.35702v11.66667c0,-0.66304 -0.02094,-1.29893 -0.05821,-1.76777c-0.03727,-0.46884 -0.08783,-0.73223 -0.14054,-0.73223h-0.46375z;M7.962,0.22278c0.03939,0 0.07717,0.35119 0.10502,0.97631c0.02785,0.62512 0.0435,1.47297 0.0435,2.35702v11.66667c0,-0.66304 -0.01174,-1.29893 -0.03263,-1.76777c-0.02089,-0.46884 -0.04922,-0.73223 -0.07876,-0.73223h-0.25991z;M8.1465,0.11208c0.01982,0 0.03882,0.35119 0.05284,0.97631c0.01401,0.62512 0.02189,1.47297 0.02189,2.35702v11.66667c0,-0.66304 -0.0059,-1.29893 -0.01641,-1.76777c-0.01051,-0.46884 -0.02476,-0.73223 -0.03963,-0.73223h-0.13076z;M8.2579,0.04524c0.008,0 0.01567,0.35119 0.02133,0.97631c0.00566,0.62512 0.00883,1.47297 0.00883,2.35702v11.66667c0,-0.66304 -0.00238,-1.29893 -0.00663,-1.76777c-0.00424,-0.46884 -0.01,-0.73223 -0.01599,-0.73223h-0.05278z;M8.3159,0.01044c0.00185,0 0.00362,0.35119 0.00492,0.97631c0.00131,0.62512 0.00204,1.47297 0.00204,2.35702v11.66667c0,-0.66304 -0.00055,-1.29893 -0.00153,-1.76777c-0.00098,-0.46884 -0.00231,-0.73223 -0.00369,-0.73223h-0.01218z;M8.3332,0.00006c0.00001,0 0.00002,0.35119 0.00003,0.97631c0.00001,0.62512 0.00001,1.47297 0.00001,2.35702v11.66667c0,-0.66304 0,-1.29893 -0.00001,-1.76777c-0.00001,-0.46884 -0.00001,-0.73223 -0.00002,-0.73223h-0.00007z;M8.2473,0.0516c0.00912,0 0.01787,0.35119 0.02432,0.97631c0.00645,0.62512 0.01008,1.47297 0.01008,2.35702v11.66667c0,-0.66304 -0.00272,-1.29893 -0.00756,-1.76777c-0.00484,-0.46884 -0.0114,-0.73223 -0.01824,-0.73223h-0.0602z;M8.0137,0.19176c0.03391,0 0.06642,0.35119 0.0904,0.97631c0.02397,0.62512 0.03744,1.47297 0.03744,2.35702v11.66667c0,-0.66304 -0.0101,-1.29893 -0.02808,-1.76777c-0.01798,-0.46884 -0.04237,-0.73223 -0.0678,-0.73223h-0.22372z;M7.6594,0.40434c0.07149,0 0.14006,0.35119 0.19061,0.97631c0.05055,0.62512 0.07895,1.47297 0.07895,2.35702v11.66667c0,-0.66304 -0.0213,-1.29893 -0.05921,-1.76777c-0.03791,-0.46884 -0.08934,-0.73223 -0.14296,-0.73223h-0.47173z;M7.2037,0.67776c0.11984,0 0.23476,0.35119 0.3195,0.97631c0.08474,0.62512 0.13234,1.47297 0.13234,2.35702v11.66667c0,-0.66304 -0.0357,-1.29893 -0.09926,-1.76777c-0.06355,-0.46884 -0.14975,-0.73223 -0.23963,-0.73223h-0.79072z;M6.6608,0h1.0035c0.17743,0 0.34759,0.35119 0.47306,0.97631c0.12546,0.62512 0.19595,1.47297 0.19595,2.35702v11.66667c0,-0.66304 -0.05286,-1.29893 -0.14696,-1.76777c-0.0941,-0.46884 -0.22172,-0.73223 -0.35479,-0.73223h-1.17075z;M6.0412,0h1.37527c0.24316,0 0.47636,0.35119 0.64831,0.97631c0.17194,0.62512 0.26854,1.47297 0.26854,2.35702v11.66667c0,-0.66304 -0.07245,-1.29893 -0.2014,-1.76777c-0.12896,-0.46884 -0.30386,-0.73223 -0.48623,-0.73223h-1.60448z;M5.353,0h1.78819c0.31617,0 0.61939,0.35119 0.84296,0.97631c0.22357,0.62512 0.34917,1.47297 0.34917,2.35702v11.66667c0,-0.66304 -0.0942,-1.29893 -0.26187,-1.76777c-0.16768,-0.46884 -0.39509,-0.73223 -0.63222,-0.73223h-2.08622z;M4.6024,0h2.23855c0.3958,0 0.77539,0.35119 1.05526,0.97631c0.27987,0.62512 0.4371,1.47297 0.4371,2.35702v11.66667c0,-0.66304 -0.11792,-1.29893 -0.32783,-1.76777c-0.2099,-0.46884 -0.4946,-0.73223 -0.79145,-0.73223h-2.61164z;M3.7937,0h2.72377c0.48159,0 0.94346,0.35119 1.284,0.97631c0.34054,0.62512 0.53185,1.47297 0.53185,2.35702v11.66667c0,-0.66304 -0.14348,-1.29893 -0.39889,-1.76777c-0.2554,-0.46884 -0.6018,-0.73223 -0.963,-0.73223h-3.17773z;M2.9302,0h3.24187c0.5732,0 1.12292,0.35119 1.52823,0.97631c0.40531,0.62512 0.63301,1.47297 0.63301,2.35702v11.66667c0,-0.66304 -0.17078,-1.29893 -0.47476,-1.76777c-0.30398,-0.46884 -0.71628,-0.73223 -1.14618,-0.73223h-3.78218z;M2.0128,0h3.79232c0.67052,0 1.31358,0.35119 1.78771,0.97631c0.47413,0.62512 0.7405,1.47297 0.7405,2.35702v11.66667c0,-0.66304 -0.19977,-1.29893 -0.55537,-1.76777c-0.3556,-0.46884 -0.83789,-0.73223 -1.34079,-0.73223h-4.42437z;M1.0402,0h4.37588c0.7737,0 1.51572,0.35119 2.06281,0.97631c0.54709,0.62512 0.85444,1.47297 0.85444,2.35702v11.66667c0,-0.66304 -0.23051,-1.29893 -0.64083,-1.76777c-0.41032,-0.46884 -0.96683,-0.73223 -1.54711,-0.73223h-5.10519z;M0,0h5c0.88405,0 1.7319,0.35119 2.35702,0.97631c0.62512,0.62512 0.97631,1.47297 0.97631,2.35702v11.66667c0,-0.66304 -0.26339,-1.29893 -0.73223,-1.76777c-0.46884,-0.46884 -1.10473,-0.73223 -1.76777,-0.73223h-5.83333z;M0,0h5c0.88405,0 1.7319,0.35119 2.35702,0.97631c0.62512,0.62512 0.97631,1.47297 0.97631,2.35702v11.66667c0,-0.66304 -0.26339,-1.29893 -0.73223,-1.76777c-0.46884,-0.46884 -1.10473,-0.73223 -1.76777,-0.73223h-5.83333z"
            dur="0.51s"
            repeatCount={"1"}
            keyTimes="0;0.04;0.08;0.12;0.16;0.2;0.24;0.27;0.31;0.35;0.39;0.43;0.47;0.51;0.55;0.59;0.63;0.67;0.71;0.75;0.78;0.82;0.86;0.9;0.94;0.98;1"
            fill="freeze"
            restart={"whenNotActive"}
          />
          <animate
            ref={(ref) => {
              svgRefs.current[3] = ref as SVGAnimationElement;
              return ref as SVGAnimationElement;
            }}
            begin={"indefinite"}
            href="#2663:22189"
            attributeName="opacity"
            values="0;0;1;1"
            dur="0.5s"
            repeatCount={"1"}
            calcMode="spline"
            keyTimes="0;0.48;0.5;1"
            keySplines="0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1"
            additive="replace"
            fill="freeze"
            restart={"whenNotActive"}
          />
        </>
      </svg>
    </div>
  );
};

export default BookOpen;
